<!--
 * @Author: zw 775925302@qq.com
 * @Date: 2023-02-17 22:39:12
 * @LastEditors: zw 775925302@qq.com
 * @LastEditTime: 2023-02-19 12:13:26
 * @Description: 拖拽组件

 getWidgetSelectClass, 
 
 用 export default defineComponent 的方式， 才支持component的is方式
-->
<template>
  <div
    :ref="drag"
    @mouseenter.stop="mouseEnter"
    @mousedown.stop="selectWidget"
    :class="[getWidgetSelectClass, 'box']"
    :style="getCmpStyle"
    @mouseleave.stop="mouseLeave"
  >
    <component :is="widget.component" :mdata="widget" />
    <div v-if="getIsWidgetSelect">
      <div class="cBottomMiddle" @mousedown="handleDragYStartEvent"></div>
      <div class="cRightMiddle" @mousedown="handleDragXStartEvent"></div>
      <div class="cRightBottom" @mousedown="handleDragXYStartEvent"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, computed, inject, onMounted, ref } from "vue";
import type { PropType } from "vue";
import type { TypeWidget, TypeWidgetStyle } from "@/types/TypeDesign";
import { useWidget } from "@/hooks/lowcode/useWidget";
import { useDrag, type DragSourceMonitor } from "vue3-dnd";
import { getEmptyImage } from "react-dnd-html5-backend";

export default defineComponent({
  name: "DragComponent",
  props: {
    widget: {
      type: Object as PropType<TypeWidget>,
      default: () => {},
    },
    preview: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["cmpScale"],

  setup(props, { emit }) {
    let {
      selectWidget,
      mouseEnter,
      mouseLeave,
      getWidgetSelectClass,
      isResizing,
      getIsWidgetSelect,
      handleDragXYStartEvent,
      handleDragXStartEvent,
      handleDragYStartEvent,
    } = useWidget(props.widget);

    const [collect, drag, previewRef] = useDrag(() => ({
      type: "element",
      item: props.widget, //当前拖拽体的数据对象
      collect: (monitor: DragSourceMonitor) => ({
        isDragging: monitor.isDragging(),
      }),
      canDrag: () => {
        if (isResizing.value) {
          return false;
        }
        return true;
      },
    }));

    const getCmpStyle = computed(() => {
      if (props.preview) {
        return {};
      } else {
        return {
          left: `${props.widget.style.left}px`,
          top: `${props.widget.style.top}px`,
          opacity: collect.value.isDragging ? 0 : 1,
          height: collect.value.isDragging ? 0 : "",
        };
      }
    });

    watch(isResizing, (newVal) => {
      emit("cmpScale", newVal);
    });

    // onMounted(() => {
    //   previewRef(getEmptyImage(), { captureDraggingState: true }); //清空默认的预览页面
    // });

    return {
      selectWidget,
      mouseEnter,
      mouseLeave,
      getWidgetSelectClass,
      getIsWidgetSelect,
      handleDragYStartEvent,
      handleDragXStartEvent,
      handleDragXYStartEvent,

      drag,
      previewRef,
      getCmpStyle,
    };
  },
});
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  cursor: move;
}

.cBottomMiddle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: transparent;
  left: 0;
  right: 0;
  bottom: -2px;
  margin: auto;
  cursor: ns-resize;
  border-radius: 50%;
  border: 1px solid red;
}

.cRightMiddle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: transparent;
  top: 0;
  bottom: 0;
  right: -2px;
  margin: auto;
  cursor: ew-resize;
  border-radius: 50%;
  border: 1px solid red;
}

.cRightBottom {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: transparent;
  bottom: -2px;
  right: -2px;
  margin: auto;
  cursor: nwse-resize;
  border-radius: 50%;
  border: 1px solid red;
}
</style>
